Hoppa till huvudinnehåll
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Hantering av offentliga visningsmallar

Offentliga visningsmallar är grunden för dina anpassade visualiseringar. De definierar layout, struktur och visuella element som kommer att tillämpas på dina installationer. Denna omfattande guide täcker allt från grundläggande mallskapande till avancerade designtekniker.

📋 Översikt​

Vad är offentliga visningsmallar?​

Mallarna fungerar som återanvändbara ritningar som:

  • 📐 Definierar visuella layouter för dina offentliga visningar
  • 🧩 Organiserar innehållsblock och deras placering
  • 🎨 Etablerar designkonsekvens över flera installationer
  • ⚙️ Möjliggör snabb implementering av standardiserade visualiseringar
  • 🔄 Stöder enkla uppdateringar över alla länkade konfigurationer

Nyckelfördelar​

FördelBeskrivning
🚀 EffektivitetSkapa en gång, använd på flera installationer
🎯 KonsekvensBibehåll enhetliga designstandarder
🔧 FlexibilitetLätt modifiering utan att behöva återskapa från början

🚀 Komma igång​

Mallar arbetsflöde​

  1. 📐 Designa layout - Planera din visuella struktur
  2. 🎨 Skapa mall - Bygg med hjälp av mallredigeraren
  3. 💾 Spara mall - Lagra för återanvändning över installationer

Förutsättningar​

Innan du skapar mallar, se till att du har:

  • ✅ SmartgridX-konto med lämpliga behörigheter
  • ✅ Tydliga designmål för din visualisering
  • ✅ Innehållskrav (bilder, datapunkter, layouter)

🎛️ Mallhanteringsgränssnitt​

Åtkomst till mallhanteraren​

infographicimage

Navigeringssteg:

  1. Logga in på ditt SmartgridX-konto
  2. Navigera till 'Offentliga visningar' i sidomenyn
  3. Klicka på knappen 'Offentlig visningsmall' på översiktssidan

Detta öppnar mallhanteringsgränssnittet där du kan visa, skapa, redigera och ta bort mallar.

Mallöversiktstabell​

infographicimage

Tillgängliga åtgärder:

  • ➕ Lägg till - Grön knapp för att påbörja skapandet av en mall
  • ✏️ Redigera - Modifiera befintlig malldesign
  • 🗑️ Ta bort - Ta bort oanvänd mall

🎨 Mallskapandeprocess​

Starta en ny mall​

Klicka på knappen "Skapa ny mall" för att öppna mallredigerarens gränssnitt.

Konfiguration av mallhuvud​

infographicimage

Inställningar för titel​

Mallens titel:

  • Syfte: Identifierar mallen i listor och konfigurationer
  • Bästa metoder: Använd beskrivande, projekt-specifika namn
  • Exempel: "Factory-KPI-Dashboard", "Energy-Monitoring-Layout", "Multi-Zone-Display"

Marginkonfiguration​

Marginalsinställningar definierar det säkra området från visningens kanter:

Marginalslider (0-100px):

  • 📐 Område: 0 till 100 pixlar från visningens kant
  • 🎯 Syfte: Skapar säkert utrymme för att förhindra innehållsavskärning
  • 📱 Tillämpning: Säkerställer synlighet på olika visningstyper
  • ⚙️ Rekommendation: Använd 10-20px för standardvisningar, 30-50px för kant-till-kant-skärmar

Visuell påverkan:

  • 0px marginal - Innehåll sträcker sig till visningens kanter
  • 50px marginal - Innehåll börjar 50 pixlar från alla kanter
  • 100px marginal - Maximalt säkert område med stort kantutrymme

Spara-funktionalitet​

Knappen 💾 Spara (övre högra hörnet) låter dig spara din aktuella mall.

🧩 Blocklayoutssystem​

Förståelse av rutnätssystemet​

infographicimage

Rutnätsgrunder​

Mallredigeraren använder ett 100×100 procentbaserat rutnätssystem:

Rutnätsinställningar:

  • 📐 Dimensioner: 100 enheter bredd × 100 enheter höjd
  • 📊 Enheter: Procentvärden (1 enhet = 1% av total dimension)
  • 🎯 Precision: Möjliggör exakt placering och storlek
  • 📱 Responsiv: Anpassar sig automatiskt till olika skärmstorlekar

Blocklayoutsexempel​

Konfiguration: 100 bredd × 100 höjd
Resultat: Fullskärmstäckning
Användningsfall: En stor visualisering, helskärm

┌─────────────────────────────────┐
│                                 │
│         FULL BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

Blockmanipulation​

Lägg till block​

Metod: Klicka på knappen "Lägg till block" (övre högra delen av redigeraren)
Resultat: Nytt block visas med standarddimensioner
Nästa steg: Placera och ändra storlek efter behov

Positionera block​

Dra och släpp:

  • 🖱️ Klicka och håll ett block för att flytta det
  • 📍 Realtidsförhandsvisning visar positionen medan du drar
  • 🧲 Rutnätsinstickning hjälper med precis justering
  • 👁️ Visuella guider visas för att hjälpa till med justering

Ändra storlek på block​

Ändra storlek-handtag:

  • 📐 Nedre högra hörnet visar ändra storlek-handtaget när blocket är valt
  • 🔧 Dra för att ändra storlek på både bredd och höjd samtidigt
  • 📊 Realtidsvärden visar aktuella dimensioner

Precision Controls​

infographicimage

Panel för sidoposition​

När ett block är valt, ger högra panelen:

Positionskontroller:

  • 📍 X-position - Horisontell förskjutning från vänster kant (0-100)
  • 📍 Y-position - Vertikal förskjutning från överkant (0-100)
  • 🎨 Z-index - Lagerordning för överlappande block
  • 📏 Bredd - Blockets breddprocent (1-100)
  • 📏 Höjd - Blockets höjdprocent (1-100)

⚙️ Blockkonfiguration​

Blocktyper och egenskaper​

infographicimage

Åtkomst till blockkonfiguration​

Metod:

  1. Välj ett block i redigeringsduken
  2. Konfigurationspanelen visas längst ner på skärmen
  3. Blocktyp rullgardinsmeny är det primära konfigurationsalternativet

Obs: Inte alla block är för närvarande konfigurerbara. Detta kommer att förändras i takt med att utvecklingen fortskrider. Fler blocktyper kommer att läggas till i framtida uppdateringar.

Tillgängliga Blocktyper​

Syfte: Visa statiska bilder, logotyper, bakgrunder, GIF:ar
Konfigurationsalternativ:

  • 📁 Bildkälla - Ladda upp eller ange URL som kommer att användas som standard för detta block. Du kan lämna detta tomt om du vill tvinga fram en bild som ska väljas i konfigurationen

Användningsfall:

  • Företagslogotyper och varumärkesprofilering
  • Bakgrundsbilder
  • Utrustningsfoton
  • GIF:ar

Exempel på Mallar​

infographicimage

Detta exempel visar en välstrukturerad mall med:

  • 📊 Tydlig blockorganisation med beskrivande etiketter
  • 📐 Rätt avstånd och justering
  • 🎯 Funktionella blocktyper för olika innehållsbehov

Blocknamn i detta exempel:

  • Varje block visar sitt avsiktliga syfte
  • Tydlig märkning hjälper med konfiguration
  • Logisk organisation stödjer underhåll

📚 Relaterad Dokumentation​

Nästa Steg​

Efter att ha skapat din mall:

  1. ⚙️ Konfigurera Installationer - Tillämpa mallar på specifika installationer
  2. 🎛️ Länk Styrenheter - Anslut till visningshårdvara
  3. 🚀 Kom igång Guide - Komplett översikt över arbetsflödet

Avancerade Ämnen​

  • 🎨 Avancerade Designtekniker
  • 📊 Anpassad Dataintegration
  • 🔄 Automatiserade Malluppdateringar
  • 👥 Samarbete om Mallar för Flera Användare

💡 Sammanfattning av Bästa Praxis​

Malldesign​

✅ Designprinciper:

  • 🎯 Håll det enkelt - Fokusera på väsentlig information
  • 📱 Designa responsivt - Testa på olika skärmstorlekar
  • 🎨 Upprätthåll konsekvens - Använd standardiserade färger och layouter

Mallhantering​

✅ Organiseringstips:

  • 📝 Använd beskrivande namn - Gör mallar lätta att hitta
  • 🔄 Regelbundet underhåll - Ta bort oanvända mallar
  • 👥 Dela standarder - Säkerställ teamkonsekvens

🎨 Redo att Designa? Med din mall skapad och konfigurerad är du redo att distribuera fantastiska visualiseringar över dina SmartgridX-installationer!